<!--
 * @Description: 请描述此文件
 * @Author: LDM
 * @Date: 2021-09-03 16:25:40
 * @LastEditors: LDM
 * @LastEditTime: 2021-10-27 09:59:37
-->
<template>
  <div class="login-container bg-white w-screen h-screen relative">
    <div class="blue-bg w-1/2 h-screen"></div>
    <div class="logo-info relative z-10 flex flex-col items-center pt-20 w-1/2 h-full">
      <div class="logo flex items-center pr-30">
        <img class="w-10 h-10 mr-3" src="/src/assets/logo.png" alt="" />
        <span class="text-white font-bold text-4xl">{{ projectTitle }}</span>
      </div>
      <img class="w-80 mt-40" src="/src/assets/login-box-bg.svg" alt="" />
      <p class="mt-12 text-white text-2xl">开箱即用的中后台管理系统</p>
    </div>
    <div class="login-form absolute top-1/3 flex flex-col items-center w-80">
      <h1 class="w-full pl-10 mb-4 text-3xl text-left font-bold">登录</h1>
      <el-form
        ref="formRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="50px"
        class="demo-ruleForm w-full"
      >
        <el-form-item label="账号" prop="account">
          <el-input v-model="ruleForm.account" type="text" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model="ruleForm.pass" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item class="mt-10">
          <el-button class="w-full" type="primary" @click="submitForm">登录</el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { toRefs, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useSettingStore } from '/@/store'
import { useUserStore } from '/@/store'
const settingStore = useSettingStore()
const userStore = useUserStore()
const { projectTitle } = toRefs(settingStore.$state)
const formRef = ref<any>(null)
const validateAccount = (_rule, value, callback: Function) => {
  // 这里可以自定义规则
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    if (ruleForm.account !== '') {
      formRef.value.validateField('account')
    }
    callback()
  }
}
const validatePass = (_rule, value, callback: Function) => {
  // 这里可以自定义规则
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (ruleForm.pass !== '') {
      formRef.value.validateField('pass')
    }
    callback()
  }
}
const rules = {
  account: [{ validator: validateAccount, trigger: 'blur' }],
  pass: [{ validator: validatePass, trigger: 'blur' }]
}
const ruleForm = reactive({
  account: '',
  pass: ''
})
const router = useRouter()
function submitForm() {
  formRef.value.validate((isCorrect: boolean) => {
    if (!isCorrect) return
    userStore.Login().then(() => {
      router.push({ path: '/' })
    })
  })
}
</script>
<style lang="scss" scoped>
.blue-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: -48%;
  background-image: url('/src/assets/login-bg.svg');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: '';
}

.login-form {
  right: 14%;
}
</style>
  
